import React, { PureComponent } from 'react';
import { Carousel, Row, Col, List, Avatar, Card, Icon, Divider, message, Button, Input } from 'antd';
import axios from 'axios';
import './cardshow.css';
export default class CardShow extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            token: sessionStorage.getItem("token"),
            reply: [],
            repcontent: '',
            card:{
              id:'',
              userId:'',
              title:'',
              word:'',
              pic:'',
                up:''
            }
        };
    }
    componentDidMount() {
        this.getReply();
        this.getCard();
    }
    getCard = () => {
        axios({
            method: 'post',
            url: "http://localhost:8080/card/selectById",
            data: { id: this.props.match.params.id, token: this.state.token }
        }).then((res) => {
            try {
                const data = res.data.data;
                this.setState({
                    card: data
                })
            } catch (e) {
                console.log(e)
                message.error("回复内容获取失败")
            }
        });
    }
    getReply = () => {
        axios({
            method: 'post',
            url: "http://localhost:8080/comment/selectByCardId",
            data: {cardid: this.props.match.params.id, token: this.state.token }
        }).then((res) => {
            try {
                const data = res.data.data;
                this.setState({
                    reply: data
                })
            } catch (e) {
                console.log(e)
                message.error("回复内容获取失败")
            }
        });
    }
    setReply = () => {
        if (this.state.repcontent != "") {
            axios({
                method: 'post',
                url: "http://localhost:8080/comment/insert",
                data: { cardid: this.props.match.params.id, commenttext: this.state.repcontent, token: this.state.token,userId:1 }
            }).then((res) => {
                try {
                    const data = res.data;
                    if (data.code == 200) {
                        message.success("回复成功");
                        this.setState({ repcontent: '' });
                        this.getReply();
                    } else {
                        message.error("回复出错");
                    }
                } catch (e) {
                    console.log(e)
                    message.error("回复失败");
                }
            });
        } else {
            message.error("回复内容不能为空");
        }
    }
    joinIn = () => { }
    changeInput = (event) => {
        this.setState({ repcontent: event.target.value });
    }
    render() {
        console.log(this.props);
        const id = this.props.match.params.id;
        return (
            <div className="action" style={{ margin: '16px auto' }}>
                <Card>
                    <h2 style={{ textAlign: 'center' }}>{this.state.card.title}</h2>
                    <p style={{ textIndent: '2rem' }}>{this.state.card.word}</p>
                    {/* <Button onClick={this.joinIn}>参加活动</Button> */}
                    <Divider />
                    <div><span style={{ color: '#55f', fontSize: '16px', fontWeight: '600' }}>评论</span></div>
                    <div style={{ paddingLeft: '20px' }}>
                        添加评论:<Input value={this.state.repcontent} onChange={this.changeInput} onPressEnter={this.setReply} />
                        <Card
                            type="inner"
                            bordered={false}
                        >
                            <List
                                itemLayout="horizontal"
                                dataSource={this.state.reply}
                                renderItem={item => (
                                    <List.Item
                                        // actions={[<a href="#"></a>]}
                                    >
                                        <List.Item.Meta
                                            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                                            title={item.userId}
                                            description={item.commenttext}
                                        />
                                    </List.Item>
                                )}
                            />
                        </Card>
                    </div>
                </Card>
            </div>
        );
    }
}